import React from "react";
import { FieldChangeData, LCGUI } from "../../../json-schema/LCGUI";
import { Control } from "../../../json-schema/SchemaTypes";
import { IotZCTempController } from "./IotZCTempController";
import { ConfigType } from "../../../designer/right/ConfigContent";
export const IotZCTempStyleConfig: React.FC<
  ConfigType<IotZCTempController>
> = ({ controller }) => {
  const { style } = controller.getConfig()!;
  const onFieldChange = (fieldChangeData: FieldChangeData) => {
    const { dataFragment } = fieldChangeData;
    controller.update(dataFragment!);
  };

  const schema: Control = {
    type: "grid",
    config: { columns: 0 },
    children: [
      {
        key: "style",
        children: [
          {
            key: "backgroundColor",
            type: "color-picker",
            label: "背景颜色",
            value: style?.backgroundColor,
            config: {
              showText: true,
            },
          },
          {
            key: "fontSize",
            type: "number-input",
            label: "字号",
            value: style?.fontSize,
            config: { min: 1 },
          },
          {
            key: "fontWeight",
            type: "number-input",
            label: "加粗",
            value: style?.fontWeight || 400,
            config: {
              min: 100,
              max: 900,
              step: 100,
            },
          },
          {
            key: "color",
            type: "color-picker",
            label: "文字颜色",
            value: style?.color,
            config: {
              showText: true,
            },
          },
          {
            key: "bordered",
            type: "radio",
            label: "是否描边",
            value: style?.bordered,
            config: {
              options: [
                {
                  label: "是",
                  value: "1",
                },
                {
                  label: "否",
                  value: "0",
                },
              ],
            },
          },
          {
            key: "borderColor",
            type: "color-picker",
            label: "描边颜色",
            value: style?.borderColor,
            config: {
              showText: true,
            },
          },
          {
            key: "showUnit",
            type: "radio",
            label: "显示单位",
            value: style?.showUnit,
            config: {
              options: [
                {
                  label: "是",
                  value: "1",
                },
                {
                  label: "否",
                  value: "0",
                },
              ],
            },
          },
        ],
      },
    ],
  };

  return <LCGUI schema={schema} onFieldChange={onFieldChange} />;
};
